<template>
    <div class="app-container">
        <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
            <el-col :span="20">
                <p ref="tip" v-if="obj.room && obj.name">
                    宿舍：
                    <span>{{ obj.room }}</span>,
                    姓名：
                    <span>{{ obj.name }}</span>
                </p>
            </el-col>
            <!-- 只有学生可以上报 -->
            <el-button v-permission="['student']" type="primary" @click="addRepair">维修上报</el-button>
        </el-row>
        <!-- 表格数据 -->
        <el-table :data="tableData" stripe border v-loading="loading" ref="idList">
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="stuId" label="学号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>、
            <el-table-column prop="status" label="状态" :formatter="statusFormat"></el-table-column>
            <el-table-column prop="typeId" label="保修类型" :formatter="typeFormat"></el-table-column>
            <el-table-column prop="information" label="保修内容"></el-table-column>
            <el-table-column prop="gmtCreate" label="申报时间">
                <template v-slot="scope">
                    {{
                        scope.row.gmtCreate | date
                    }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" v-permission="['student']">
                <template slot-scope="scope">
                    <el-button v-permission="['student']" size="mini" @click="editRepair(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        v-permission="['student']"
                        size="mini"
                        type="danger"
                        @click="deleteRepair(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加申报弹出框 -->
        <el-dialog :visible.sync="addRepairShow">
            <el-form :model="addRepairForm" ref="addRepairForm" :rules="rules">
                <el-form-item label="类型" :label-width="formLabelWidth" prop="typeId">
                    <el-select v-model="addRepairForm.typeId" placeholder="请选择">
                        <!-- <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>-->
                        <el-option label="家电类" value="1"></el-option>
                        <el-option label="家具类" value="2"></el-option>
                        <el-option label="浴室类" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="保修内容" :label-width="formLabelWidth" prop="information">
                    <el-input v-model="addRepairForm.information" autocomplete="off"></el-input>
                </el-form-item>
                <el-row>
                    <el-col style="display: flex; justify-content: center;margin-top: 40px;">
                        <el-form-item>
                            <el-button type="primary" @click="addSubmitForm()">提交</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
        <!-- 编辑弹出框 -->
        <el-dialog :visible.sync="editRepairShow">
            <el-form :model="editRepairForm" ref="editRepairForm" :rules="rules">
                <el-form-item label="类型" :label-width="formLabelWidth" prop="typeId">
                    <el-select v-model="editRepairForm.typeId" placeholder="请选择">
                        <el-option label="家电类" value="1"></el-option>
                        <el-option label="家具类" value="2"></el-option>
                        <el-option label="浴室雷" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="保修内容" :label-width="formLabelWidth" prop="information">
                    <el-input v-model="editRepairForm.information" autocomplete="off"></el-input>
                </el-form-item>
                <el-row>
                    <el-col style="display: flex; justify-content: center;margin-top: 40px;">
                        <el-form-item>
                            <el-button type="primary" @click="editSubmitForm()">提交</el-button>
                            <el-button @click="resetForm()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getRepair, deleteRepair, saveRepair, updateRepair } from '@/api/repairescalation'
import { getUserInformation } from '@/api/room'
export default {
    data() {
        return {
            tableData: [],
            loading: false,
            addRepairShow: false,
            formLabelWidth: "80px",
            editRepairShow: false,
            params: {
                pageCurrent: 1,
                pageSize: 10,
            },
            addRepairForm: {
                typeId: null,
                information: null
            },
            // typeOptions: [{
            //     value: 1,
            //     label: '电器类'
            // }, {
            //     value: 2,
            //     label: '家具类'
            // }, {
            //     value: 3,
            //     label: '浴室类'
            // }],
            rules: {
                information: [
                    { required: true, message: '请输详细信息', trigger: 'blur' }
                ],
                typeId: [
                    { required: true, message: '请选择类型', trigger: 'blur' },
                ]
            },
            obj: {},
            // 编辑表单
            editRepairForm: {}
        }
    },
    computed: {
        ...mapGetters(["username"]),
    },
    created() {
        this.getRepair()
        this.getUserInformation()
    },
    methods: {
        // 状态格式化
        statusFormat(row, index) {
            if (row.status == 0) {
                return "待解决";
            } else if (row.status == 1) {
                return "已解决";
            } else if (row.status == 2) {
                return "申报中";
            } else if (row.status == 3) {
                return "已完结";
            }
        },
        // 保修类型格式化
        typeFormat(row, index) {
            if (row.typeId == 1) {
                return "电器类";
            } else if (row.typeId == 2) {
                return "家具类"
            } else if (row.typeId == 3) {
                return "浴室类"
            }
        },
        // 获取维修信息
        getRepair() {
            getRepair({
                pageCurrent: this.pageCurrent,
                pageSize: this.pageSize,
                username: this.username
            }).then((res) => {
                if (res) {
                    if (res.code === "200") {
                        setTimeout(() => {
                            this.tableData = res.data.records
                            console.log(res);
                            this.loading = false
                        }, 200);
                    }
                }


            })
        },
        // 维修上报
        addRepair() {
            // let roles = sessionStorage.getItem('roles'); 
            // let  role = JSON.parse(roles).roles[0]
            // if (role != 'student') {
            //     this.$message.error("只有学生才可以维修上报")
            //     return false
            // }
            if (this.obj.roomId) {
                // 打开对话框
                this.addRepairShow = true
            } else {
                this.$message.error("您还为入住，暂时不能提交维修")
            }

        },
        // 提交维修表单
        addSubmitForm() {
            this.$refs.addRepairForm.validate((valid) => {
                if (valid) {
                    saveRepair({
                        information: this.addRepairForm.information,
                        stuId: this.username,
                        typeId: this.addRepairForm.typeId
                    }).then((res) => {
                        if (res.code === "200") {
                            this.addRepairShow = false
                            if (this.obj.roomId) {
                                this.getRepair()
                                this.$message.success("提交成功")
                            } else {
                                this.$message.success("提交失败，你还没有入住")
                            }
                        }
                    }).catch((err) => {
                        console.log(err);
                    })
                }
            })

        },
        // 删除数据
        async deleteRepair(index, row) {
            const confirm = await this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err)
            if (confirm !== 'confirm') {
                return this.$message.info("已取消删除")
            }
            // 确定删除
            deleteRepair(row.id).then((res) => {
                if (res.code !== "200") {
                    this.$message.error("删除失败")
                } else {
                    this.$message.success("删除成功")
                    this.getRepair()
                }
            })
        },

        // 获取当前登录的用户信息
        getUserInformation() {
            // console.log(this.username);
            getUserInformation(this.username).then((res) => {
                if (!res.data) {
                    this.loading = false
                    // this.$refs.tip.innerHTML = ""
                    // console.log(this.$refs.tip.innerHTML = "");
                } else {
                    this.obj = res.data
                }

            })
        },
        // 编辑报单
        editRepair(index, row) {
            this.editRepairShow = true
            this.editRepairForm = JSON.parse(JSON.stringify(row))
        },
        editSubmitForm() {
            this.$refs.editRepairForm.validate((valid) => {
                if (valid) {
                    updateRepair(this.editRepairForm).then((res) => {
                        if (res.code === "200") {
                            this.getRepair(),
                                this.editRepairShow = false
                            this.$message.success("更新成功")
                        }
                    })
                        .catch((err) => { this.$message.error(err) })
                }
            })

        },


        resetForm() {
            this.addRepairForm = {}
            this.editRepairForm = {}
        },
    },

}
</script>
<style lang="">
    
</style>